<script lang="ts" setup>
import { TableColumnsType, TablePaginationConfig } from "ant-design-vue";

import { reactive, defineEmits, toRefs } from "vue";
import { useDebounce } from "@/hooks/debounce";
import { IFlowDevListModel, IStandardPageModel } from "@/api/base/index.type";
const { debounce } = useDebounce();

const emit = defineEmits<{ (e: "handlePageSize", arg: PageSize): void }>();

// 接受父亲 传递的数据
const props = withDefaults(
  defineProps<{
    data: Partial<IStandardPageModel<IFlowDevListModel>>;
  }>(),
  {
    data: () => ({
      items: [
        {
          id: 1,
          devicetype: null,
          devicecode: "002",
          devicecaliber: null,
          devicedeepth: null,
          deviceposition: null,
          watertype: null,
          deviceregion: null,
          status: "OFFLINE",
          accumulateflow: 418,
          currentflow: 40,
          currentsignal: 9,
          deviceid: "783f1d20-4a61-11ef-82d8-bf223ee0f252",
          deviceinfo:
            '{"longitude":104.07274727,"latitude":30.57899372,"address":"四川省成都市武侯区锦悦西路2"}',
        },
      ],
      meta: {
        total: 135,
        pages: 135,
        current: 1,
        pageSize: 10,
      },
    }),
  }
);
const { data } = toRefs(props);
console.log("data2222222:", data);
const columns: TableColumnsType = [
  {
    title: "客户编号",
    dataIndex: "id",
    key: "id",
    width: 150,
    align: "center",
  },
  {
    title: "设备类型,",
    dataIndex: "devicetype",
    key: "devicetype",
    width: 150,
    align: "center",
  },
  {
    title: "设备编号",
    dataIndex: "deviceCode",
    key: "deviceCode",
    width: 150,
    align: "center",
  },
  {
    title: "设备口径",
    dataIndex: "devicecaliber",
    key: "devicecaliber",
    width: 150,
    align: "center",
  },
  {
    title: "设备深度",
    dataIndex: "devicedeepth",
    key: "devicedeepth",
    width: 150,
    align: "center",
  },
  {
    title: "设备位置",
    dataIndex: "deviceposition",
    key: "deviceposition",
    width: 150,
    align: "center",
  },

  {
    title: "用水类型",
    dataIndex: "watertype",
    key: "watertype",
    width: 150,
    align: "center",
  },
  {
    title: "设备区域,",
    dataIndex: "deviceregion",
    key: "deviceregion",
    width: 150,
    align: "center",
  },

  {
    title: "设备状态",
    dataIndex: "status",
    key: "status",
    width: 150,
    align: "center",
    filters: [
      {
        text: "OFFLINE",
        value: "OFFLINE",
      },
      {
        text: "INACTIVE",
        value: "INACTIVE",
      },
    ],
    onFilter: (value, record) => record.deviceStatus.startsWith(value),
  },

  {
    title: "正累计流量",
    dataIndex: "accumulateflow",
    key: "accumulateflow",
    width: 150,
    align: "center",
  },
  {
    title: "当前流量",
    dataIndex: "currentflow",
    key: "currentflow",
    width: 150,
    align: "center",
  },
  {
    title: "信号值",
    dataIndex: "currentsignal",
    key: "currentsignal",
    width: 150,
    align: "center",
  },

  {
    title: "设备id",
    dataIndex: "deviceid",
    key: "deviceid",
    width: 150,
    align: "center",
    customRender: ({ text, record, index, column }) => {
      return text;
    },
    ellipsis: true,
  },
  {
    title: "设备信息",
    dataIndex: "deviceinfo",
    key: "deviceinfo",
    width: 150,
    align: "center",
  },
];

// table
const paginationSet: TablePaginationConfig = reactive({
  // ... 初始化你的分页配置
  total: data.value.meta.total,
  current: data.value.meta.current,
  pageSize: data.value.meta.pageSize,
  position: ["bottomCenter"],
  showTotal: (total) => `共 ${total} 条数据`,
  showSizeChanger: true,
  pageSizeOptions: ["10", "15", "20"],
  onChange: debounce((current: number, pageSize: number) => {
    console.log("current:", current);
    console.log("pageSize:", pageSize);

    emit("handlePageSize", { current: current, pageSize: pageSize });
    paginationSet.current = current;
  }, 300),

  onShowSizeChange(current, pageSize) {
    paginationSet.pageSize = pageSize; // 修改每页显示的条数
    paginationSet.current = 1;
  },
});

function getStatusColor(status) {
  if (status === "ONLINE") {
    return "success";
  } else if (status === "OFFLINE") {
    return "error";
  } else {
    return "processing";
  }
}
</script>

<template>
  <div>
    <a-table
      :columns="columns"
      :data-source="data.items"
      class="table"
      :pagination="paginationSet"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'deviceid'">
          <a-tooltip
            :color="'#108ee9'"
            placement="left"
            :title="record.deviceid"
          >
            {{ record.deviceid }} </a-tooltip
          >;
        </template>

        <template v-if="column.key === 'status'">
          <a-tag :color="getStatusColor(record.status)">{{
            record.status
          }}</a-tag>
        </template>

        <template v-if="column.key === 'deviceinfo'">
          <a-popover trigger="hover" placement="left">
            <template #content>
              <a-card title="设备信息" :bordered="false" style="width: 300px;">
                <a-card-meta>
                  <template #description>
                    <p>纬度：{{ record.deviceinfo.latitude }}</p>
                    <p>经度：{{ record.deviceinfo.longitude }}</p>
                    <p>地址：{{ record.deviceinfo.address }}</p>
                  </template>
                  <template #avatar>
                    <a-avatar
                      :src="
                        record.deviceinfo.avatar ??
                        `https://joeschmoe.io/api/v1/random`
                      "
                    >
                    </a-avatar>
                  </template>
                </a-card-meta>
              </a-card>
            </template>
            {{ record.deviceinfo.address }}
          </a-popover>
        </template>
      </template>
    </a-table>
  </div>
</template>

<style lang="scss" scoped>
@import "/src/assets/style/tableDeep.scss";

.table {
  width: 96%;
  height: 100%;
  margin: 10px auto;
  height: 80vh;
  overflow: scroll;

  //布局
  :deep(.ant-layout) {
    display: inline;
  }
}
</style>
